{% extends "base.html" %}

{% block app_content %}
<br>
<div class="row">
    <div class="col-md-6">
        <h1>Hello ! {{current_user.username}}</h1>
        {% import 'bootstrap/wtf.html' as wtf%}
        {{wtf.quick_form(form)}}

     {%include 'posts_content.html'%}
     <hr>
     <nav aria-label="Page navigation">
         <center>
             <ul class="pagination">
                 {%if posts.has_prev%}
                 <li>
                     <a href="{{url_for('index',page=posts.prev_num)}}" aria-label="Previous">
                         <span aria-hidden="true">&laquo; Prev</span>
                     </a>
                 </li>
                 {%endif%}
     
                 {% for i in posts.iter_pages(left_current = 2, right_current = 2) %}
                 {%if i%}
                 <li class="{%if i==posts.page%}active{%endif%}"><a href="{{url_for('index',page=i)}}">{{i}}</a></li>
                 {%else%}
                 <li><a href="#">...</a></li>
                 {%endif %}
                 {% endfor %}
                 {%if posts.has_next%}
                 <li>
                     <a href="{{url_for('index',page=posts.next_num)}}" aria-label="Next">
                         <span aria-hidden="true">&raquo; Next</span>
                     </a>
                 </li>
                 {%endif%}
             </ul>
         </center>
     </nav>
    </div>
    <div class="col-md-3 col-md-offset-2">
        <div class="thumbnail text-center">
            <img src="{{current_user.avatar_img}}" alt="avatar_img" width="120px">
            <div class="caption">
                <h3>{{current_user.username}}</h3>
                <p>
                    <a href="#" class="btn btn-primary" role="button">{{n_followers}} followers</a>
                    <a href="#" class="btn btn-default" role="button">{{n_followed}} followed</a>
                </p>
            </div>
        </div>
    </div>

</div>
{% endblock %}